<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小组作业</title>
    <!-- 导航/轮播 -->
    <link rel="stylesheet" href="./css/daohang.css" !impotant>
    <!-- 导航图标 -->
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <!--课程推荐轮播-->
    <link rel="stylesheet" href="./css/lunbo.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"/>
    <!-- 卡片 -->
    <link rel="stylesheet" href="./css/kapian.css">
    <!-- 尾页 -->
    <link rel="stylesheet" href="./css/foot.css">
    <script src="./js/script.js" defer></script>
    <script src="./js/swiper-bundle.min.js"></script>
</head>
<body>
  <!-- 导航 -->
<header>
<input type="checkbox" name="check" id="check">
<a href="https://gitee.com/lvlv666666/group-tasks.git"><img src="./img/LOGO.png" class="LOGO"></a>
<nav class="nav" id="navbar">
  <a href="../首页/首页.html">首页</a>
  <a href="../课程列表/课程列表.html">课程列表</a>
  <a href="../课程评价/课程评价.html">课程详情</a>
  <a href="../关于我们/关于我们.html">关于我们</a>
  <a href="../注册/注册登录页面.html" id="anniu1">注册</a>
</nav>
<div class="user-form-group">
    <label for="check">
        <i class='bx bx-menu menu'></i>
        <i class='bx bx-x close-menu'></i>
    </label>
</div>
</header>



<!-- 轮播 -->
 <div class="boxone">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./img/背景.png" alt=""></div>
          <div class="swiper-slide"><img src="./img/背景.png" alt=""></div>
          <div class="swiper-slide"><img src="./img/背景.png" alt=""></div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>
      <br>


      
<!-- 课程卡片  -->
      <!-- 卡片 -->
      <div class="box big">
        <div class="box smal">
            <a href="#"><img src="./img/11.png" class="img11"></a>
        </div>
        <div class="box smal">
          <a href="#"><img src="./img/22.png" class="img22"></a>
        </div>
        <div class="box smal">
          <a href="#"><img src="./img/33.png" class="img33"></a>
        </div>
      </div>
        <br>
        <br>
      </div>
      

         
      <!-- 每日推荐 -->
 <div class="wrapper1">
    <div class="lesson">
      <h1  class="classcard">课程推荐</h1></div>
 <br>
    <div class="box page active" id="page1"> 
      <!-- class="page active" -->
      <div class="box small" >
          <img src="./img/1听力书.png" alt="">
          <h2>大学生英语</h2>
          <br>
          <br>
          <br>
          <h4>大学生英语，学习从现在开始。大学生英语，学习从现在开始</h4>
          <br>
          <br>
          <a href="../课程列表/课程列表.html">点击>></a>
      </div>
      <div class="box small">
        <img src="./img/2口语书.png" alt="">
        <h2>大学生英语</h2>
        <br>
        <br>
        <br>
        <h4>大学生英语，学习从现在开始。大学生英语，学习从现在开始</h4>
        <br>
        <br>
        <a href="../课程列表/课程列表.html">点击>></a>
      </div>
      <div class="box small">
        <img src="./img/3写作书.png" alt="">
        <h2>大学生英语</h2>
        <br>
        <br>
        <br>
        <h4>大学生英语，学习从现在开始。大学生英语，学习从现在开始</h4>
        <br>
        <br>
        <a href="../课程列表/课程列表.html">点击>></a>
      </div>
      <div class="box small">
        <img src="./img/222222222.png" alt="">
        <h2>大学生英语</h2>
        <br>
        <br>
        <br>
        <h4>大学生英语，学习从现在开始。大学生英语，学习从现在开始</h4>
        <br>
        <br>
        <a href="../课程列表/课程列表.html">点击>></a>
      </div>
      <div class="box small">
        <img src="./img/4听力进阶.png">
        <h2>大学生英语</h2>
        <br>
        <br>
        <br>
        <h4>大学生英语，学习从现在开始。大学生英语，学习从现在开始</h4>
        <br>
        <br>
        <a href="../课程列表/课程列表.html">点击>></a>
      </div>
      <div class="box small">
        <img src="./img/5口语进阶.png">
        <h2>大学生英语</h2>
        <br>
        <br>
        <br>
        <h4>大学生英语，学习从现在开始。大学生英语，学习从现在开始</h4>
        <br>
        <br>
        <a href="../课程列表/课程列表.html">点击>></a>
      </div>
  </div>
 </div>
    

 <!-- 课程推荐 -->
 <div class="wrapper">
  <div class="lesson">
    <br>
    <br>
    <h1 class="classcard">课程展示</h1></div>
  <i id="left" class="fa-solid fa-angle-left"></i>
  <ul class="carousel">
    <li class="card">
      <div class="img">
        <img src="./img/1听力书.png" alt="img" draggable="false">
      </div>
      <h2>听力速通</h2>
      <span></span>
    </li>
    <li class="card">
      <div class="img">
        <img src="./img/2口语书.png" alt="img" draggable="false">
      </div>
      <h2>口语速通</h2>
      <span></span>
    </li>
    <li class="card">
      <div class="img">
        <img src="./img/3写作书.png" alt="img">
      </div>
      <h2>写作速通</h2>
      <span></span>
    </li>
    <li class="card">
      <div class="img">
        <img src="./img/4听力进阶.png" alt="img" draggable="false">
      </div>
      <h2>听力进阶</h2>
      <span></span>
    </li>
    <li class="card">
      <div class="img">
        <img src="./img/5口语进阶.png" alt="img" draggable="false">
      </div>
      <h2>口语进阶</h2>
      <span></span>
    </li>
  </ul>
    
  <i id="right" class="fa-solid fa-angle-right"></i>
</div>
    <br>
      </div>  
    </div>  


     <!--foot  -->
     <div class="footer">  
      <div class="footer-left">  
          <div class="footer-logo">  
              <img src="./img/LOGO.png" alt="网站LOGO" style="max-width: 60px;">  
          </div>  
          <p class="footer-text" class="lorem">我们是顺职2班第8小组。我们希望通过这个平台,
           为热爱英语的同学们提供一个交流、分享、成长的空间。
           </p>  
           <!-- 社交媒体 -->
           <div class="img1">
           <a href="https://gitee.com/lvlv666666/group-tasks.git"><img src="./img/邮箱.png" alt=""></a>
           <a href="https://gitee.com/lvlv666666/group-tasks.git"><img src="./img/仓库.png" alt=""></a>
          </div>
      </div>  
      <div class="footer-right">  
          <div class="footer-link" class="lorem">电子邮件：2514***@gta.edu.cn</div>  
          <div class="footer-link" class="lorem">电话:138******256</div>  
          <div class="footer-link" class="lorem">***********</div>  
      </div>  
      </div>  
      <script>
        var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 10,
      autoplay: {
      stopOnLastSlide: true,
      },
      navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        "@0.00": {
          slidesPerView: 1,
          spaceBetween: 10,
        },
        "@0.75": {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        "@1.00": {
          slidesPerView: 3,
          spaceBetween: 40,
        },
        "@1.50": {
          slidesPerView: 4,
          spaceBetween: 50,
        },
      },
    });
       
      </script>
</body>
      <script>
        var swiper = new Swiper(".mySwiper", {
          slidesPerView: 1,
          spaceBetween: 30,
          loop: true,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      </script>
      
</html>